const path = require("path");
const webpack = require("webpack");
const { name } = require('./package')

// gizp
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const { log } = require("console");


function resolve(dir) {
  return path.join(__dirname, "./", dir);
}
module.exports = {
  // assetsDir: "assets",
  // outputDir: "dist",
  outputDir: process.env.VUE_APP_outputDir,
  publicPath: process.env.NODE_ENV === "production" ? "/child/vue-cli3/" : "/",
  productionSourceMap: false,
  // 是否开启编译时是否不符合eslint提示
  lintOnSave: false,
  devServer: {
    // 解决在局域网下无法访问
    host: "0.0.0.0",
    port: 1234,
    //自动打开浏览器，packpage权限更高
    open: true,
    // 让浏览器 overlay 同时显示警告和错误
    overlay: {
      warnings: true,
      errors: true
    },
    // 热更新 开启后test环境报错
    // hotOnly: true,
    proxy: {
      "/api": {
        target: "http://127.0.0.1:8080",
        changeOrigin: true
      },
      "/test": {
        target: "http://121.36.2.1:22222/",
        ws: true,
        changOrigin: true, // 是否跨域
        pathRewrite: {
          "^/test": ""
        }
      },
      "/download": {
        target: "http://tongtong-img.obs.cn-north-4.myhuaweicloud.com:80/true_1607576257653.pdf",
        ws: true,
        changOrigin: true, // 是否跨域
        pathRewrite: {
          "^/download": ""
        }
      },
      "/upLoadFile": {
        target: "http://121.36.2.1:22222/admin/guest/file/uploadChatFile?creatorId=1002&customerId=1002",
        ws: true,
        changOrigin: true, // 是否跨域
        pathRewrite: {
          "^/upLoadFile": ""
        }
      }
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },

  // 配置
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('router', resolve('src/router'))
      .set('utils', resolve('src/utils'))
      .set('static', resolve('src/static'))
      .set('store', resolve('src/store'))
      .set('views', resolve('src/views'))

    // 文件分析
    // config.plugin("webpack-bundle-analyzer").use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin);

    // 压缩图片
    // config.module.rule('images')
    //   .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
    //   .use('image-webpack-loader')
    //   .loader('image-webpack-loader')
    //   .options({ bypassOnDebug: true })
    //   .end()

    // 修复HMR // 修复热更新失效
    config.resolve.symlinks(true);

    // 压缩代码
    // config.optimization.minimize(true);

    //  删除 prefetch: 当页面很多时，它将导致太多无意义的请求,一般在手机端禁用
    // config.plugins.delete('prefetch')

    // 移除 preload 插件，避免加载多余的资源
    // config.plugins.delete('preload');

    // 分割代码,抽取公共代码
    config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
        //公用模块抽离
        common: {
          chunks: 'initial',
          minSize: 0, //大于0个字节
          minChunks: 2, //抽离公共代码时，这个代码块最小被引用的次数
        },
        //第三方库抽离
        vendor: {
          priority: 1, //权重
          test: /node_modules/,
          chunks: 'initial',
          minSize: 0, //大于0个字节
          minChunks: 2, //在分割之前，这个代码块最小应该被引用的次数
        },
      },
    })

    /* vue-worker */
    config.module.rule('worker-loader')
      .test(/\.worker\.js$/)
      .use('worker-loader')
      .loader('worker-loader')
      .end()
  },
  configureWebpack: config => {
    config.plugins.push(...[
      //富文本需要
      new webpack.ProvidePlugin({
        "window.Quill": "quill/dist/quill.js",
        Quill: "quill/dist/quill.js"
      }),
      // gzip 压缩代码 这个需要后台配合
      new CompressionWebpackPlugin({
        filename: info => {
          return `${info.path}.gz${info.query}`;
        },
        //压缩算法
        algorithm: "gzip",
        //匹配文件
        test: /\.(js|css|html|svg)$/,
        // 只有大小大于该值的资源会被处理 10240
        threshold: 10240,
        // 只有压缩率小于这个值的资源才会被处理
        minRatio: 0.8,
        //删除原始文件只保留压缩后的文件
        deleteOriginalAssets: false
      }),
    ])
    config.externals = {
      // axios: "axios",
      // vue: "Vue",
      // "vue-router": "VueRouter",
      // "element-ui": "ELEMENT",
      // echarts: "echarts",
    }
    config.output={
      // 把子应用打包成 umd 库格式(必须) 微应用需要
      library: `${name}-[name]`,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${name}`,
      ...config.output
    }
  },
  pluginOptions: {
    // "style-resources-loader": {
    //   preProcessor: "less",
    //   patterns: [path.resolve(__dirname, "./src/style/common.less")],
    // },
  },
  css: {
    //true css不会热更新
    extract: process.env.NODE_ENV === "production" ? true : false,
    sourceMap: false,
    loaderOptions: {
      sass: {
        additionalData: `@import "src/assets/style/variable.scss";`
      }
      // postcss: {//在postcss.config.js配置可以热更新
      //   plugins: [
      //     // require("autoprefixer")(),
      //     require("postcss-pxtorem")({
      //       rootValue: 192, //设计稿宽度为1920px的
      //       propList: ["*"],
      //       minPixelValue: 10, //可以被替换的最小像素
      //       unitPrecision: 5, //rem小数位上限
      //     }),
      //   ],
      // },
    }
  },

};
